<template>
  <div class="reg-container">
    <div class="reg-box">
      <!-- 头像区域 -->
      <div class="avatar-box">
        <img src="../../assets/images/logo.png" alt="" />
      </div>
      <!-- 登录表单区域 -->
      <el-form
        :label-position="labelPosition"
        label-width="0px"
        :model="regForm"
        :rules="regFormRules"
        class="reg-form"
        ref="regFormRef"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="loginName">
          <el-input
            v-model="regForm.loginName"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email" :error="errorMsg">
          <el-input
            v-model="regForm.email"
            placeholder="如xxx@126.com"
            @blur.native.capture="checkEmail"
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item label="验证码" prop="clientCode">
          <el-input
            v-model="regForm.clientCode"
            placeholder="输入5位验证码"
            style="width: 246.5px"
          ></el-input>
          <el-button
            :disabled="regForm.show"
            type="primary"
            @click="emailCode()"
            style="
              width: 168px;
              padding: 12px 0px;
              margin-left: 36px;
              margin-top: 0px;
              background-color: #0acf97;
            "
            ><span v-show="regForm.show">{{ count }}s后重新</span
            >发送验证码</el-button
          >
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="regForm.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <!-- 上传二维码 -->
        <el-form-item label="上传高清二维码" prop="file">
          <el-input v-model="regForm.file" v-if="false"></el-input>
          <el-upload
            class="avatar-uploader"
            ref="upload"
            :show-file-list="false"
            action="#"
            :before-upload="beforeUpload"
            :on-change="handleChange"
            :auto-upload="false"
            :data="regForm"
            style="padding: 0px; margin-left: 118px; margin-top: -28px"
          >
            <img v-if="regForm.file" :src="regForm.file" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!-- <el-input type="file" v-model="regForm.file" style="boder:0px!important">
          </el-input> -->
          <!-- <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :before-upload="beforeLocalUpload"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <i
              class="fa fa-link"
              aria-hidden="true"
              style="cursor: pointer; font-size: 20px"
            ></i>

            <el-button size="small" type="primary">点击上传</el-button> -->
          <!-- </el-upload> -->
          <!-- <el-upload
            class="upload-demo"
            action="#"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload> -->
        </el-form-item>
        <el-form-item class="btns">
          <!-- 按钮 -->
          <el-button
            type="primary"
            @click="onSubmit('regForm')"
            v-loading="submitState"
            >登录</el-button
          >
        </el-form-item>
        <el-form-item>
          <div class="btns" style="margin-top: 50px">
            <p class="text-muted">
              已经有账号了?
              <router-link to="/login"><b>登录</b></router-link>
            </p>
          </div>
        </el-form-item>
      </el-form>
      <div class="footer-box">
        <p class="account-copyright">2018 © Highdmin. - Coderthemes.com</p>
      </div>
    </div>
    <div id="starry-box">
      <vue-particles
        color="#fff"
        :particleOpacity="0.5"
        :particlesNumber="120"
        shapeType="circle"
        :particleSize="2"
        linesColor="#fff"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="100"
        :moveSpeed="4"
        :hoverEffect="true"
        hoverMode="grab"
        :clickEffect="true"
        clickMode="push"
      >
      </vue-particles>
    </div>
  </div>
</template>

<script>
export default {
  name: "reg",
  // el: ".upload-image",
  data() {
    return {
      labelPosition: "top",
      file: "",
      // 登录表单的数据绑定对象
      count: "",
      regForm: {
        loginName: "",
        email: "",
        clientCode: "",
        password: "",
        file: "",
      },
      errorMsg: null,
      // 表单的验证规则对象
      regFormRules: {
        loginName: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 2 到 15 个字符",
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: "请输入邮箱地址",
            trigger: "blur",
          },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur"],
          },
        ],
        clientCode: [
          {
            required: true,
            message: "请输入邮箱验证码",
            trigger: "blur",
          },
          {
            min: 5,
            max: 5,
            message: "长度为5个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    checkEmail() {
      let vm = this;
      vm.errorMsg = null;
      let obj = {
        email: this.regForm.email,
      };
      let query = this.$qs.stringify(obj);
      if (this.regForm.email == "") {
        return;
      } else {
        this.reqM1Service("person/check/mail", query, "post").then(
          ({ data: res }) => {
            console.log(res);
            if (res.status === 1) {
              vm.errorMsg = res.msg;
            }
          }
        );
      }
    },
    // 发送邮箱验证码**
    async emailCode() {
      if (this.regForm.email == "") {
        return this.$message.error("未输入邮箱");
      } else {
        let obj = {
          email: this.regForm.email,
        };
        let query = this.$qs.stringify(obj);
        try {
          const { data: res } = await this.reqM1Service(
            "person/send/mail",
            query,
            "post"
          );
          console.log(res);
          // 开启验证码延时
          this.getCode();
          this.regForm.show = true;
          this.$message.success(res.message);
        } catch (error) {
          this.$message.error("邮箱发送失败 19999");
        }
      }
    },
    // 验证莫延时**
    getCode() {
      const TIME_COUNT = 60;
      this.count = TIME_COUNT;
      let timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count -= 1;
          if (this.count == 0) {
            this.regForm.show = !this.regForm.show;
          }
        } else {
          // 重新开启
          clearInterval(timer);
        }
      }, 1000);
      //
    },
    /**
     * 提交
     * @param formName
     */
    onSubmit() {
      this.$refs.regFormRef.validate(async (valid) => {
        if (!valid) return;
        const vm = this;
        let obj = {
          loginName: this.regForm.loginName,
          password: this.regForm.password,
          email: this.regForm.email,
          clientCode: this.regForm.clientCode,
          file: this.regForm.file,
        };
        let query = this.$qs.stringify(obj);

        try {
          await this.reqM1Service("register", query, "post").then(
            ({ data: res }) => {
              console.log(res);
              if (res.status == 0) {
                return this.$message.error("验证码失效");
              } else if (res.status == 5001) {
                return this.$message.error("添加失败！请上传高清原图二维码");
              } else {
                this.$message.success("注册成功");
                this.$router.push("/login");
              }
            }
          );
        }catch(error){
          this.$message.error("注册出错");
        }
      });
    },
    handleChange(file, fileList) {
      this.regForm.file = URL.createObjectURL(file.raw);
    },

    beforeUpload(file) {
      return true;
    },

    // handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // beforeLocalUpload(file) {
    //   let formData = new FormData();
    //   if (file) {
    //     formData.append("files", file);
    //   }
    //   this.uploadImg(formData);
    // },
    // uploadImg(formData) {
    //   this.$http({
    //     method: "post",
    //     url: "/rest/1.0/document/file/upload",
    //     data: formData,
    //     headers: {
    //       "Content-Type": "multipart/form-data",
    //     },
    //   }).then((res) => {
    //     this.fileList.push(res.data.data[0]);
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.reg-container {
  height: 100%;
}

.reg-box {
  width: 542px;
  height: 780px;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);

  .avatar-box {
    height: auto;
    width: 120px;
    position: absolute;
    left: 50%;
    top: 11%;
    transform: translate(-50%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.reg-form {
  position: absolute;
  top: 18%;
  width: 100%;
  padding: 0 45px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: center;
}
.text-muted {
  color: #98a6ad !important;
}
b {
  color: #313a46;
}
.footer-box {
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%);
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}

/deep/ .el-form-item__content {
  line-height: 30px;
}
/deep/ .el-form-item {
  margin-bottom: 10px;
}
/deep/ .el-form-item__label {
  padding-bottom: 0 !important;
  color: #313a46;
}
/deep/.el-input__inner {
  border: 1px solid #d9e3e9;
}
/deep/.el-input__inner:focus {
  border-color: #a2b9ca !important;
}
/deep/ .el-input input::-webkit-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-moz-input-placeholder {
  color: #757575;
}
/deep/ .el-input input::-ms-input-placeholder {
  color: #757575;
}
/deep/ .el-checkbox__input.is-checked /deep/.el-checkbox__inner,
/deep/ .el-checkbox__input.is-indeterminate /deep/.el-checkbox__inner {
  background-color: #02c0ce;
  border-color: #02c0ce;
}
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  color: #02c0ce;
}
/deep/.el-checkbox.is-bordered.is-checked {
  border-color: #02c0ce;
}
/deep/.el-checkbox__input.is-focus /deep/.el-checkbox__inner {
  border-color: #02c0ce;
}
/deep/.el-checkbox__inner {
  background-color: #ffffff;
  border-radius: 3px;
  border: 2px solid #98a6ad;
  content: "";
  // display: inline-block;
  height: 18px;
  left: 0;
  margin-right: 8px;
  // position: absolute;
  transition: 0.3s ease-in-out;
  width: 18px;
  outline: none !important;
}
/deep/ .el-checkbox__inner:hover {
  border-color: #02c0ce;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #02c0ce;
  border-color: #02c0ce;
}
/deep/.el-button {
  padding: 12px 197px;
  margin-top: 20px;
}
/deep/ .el-button--primary:focus,
.el-button--primary:hover {
  background: #02a8b5;
  border-color: #02a8b5;
}
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  .el-form-item__label-wrap
  > .el-form-item__label:before,
/deep/.el-form-item.is-required:not(.is-no-asterisk)
  > .el-form-item__label:before {
  content: "";
  margin-right: 0;
}
/deep/.el-form-item__error {
  top: 0;
  right: 0 !important;
  padding-top: 0px;
  left: auto;
  margin-top: -20px;
}
/deep/.el-form-item.is-error .el-input__inner {
  background-color: #fbe2e2;
}
/deep/ .avatar-uploader-icon[data-v-60700839] {
  border: 1px dashed #d9d9d9;
}
// 星空背景
#particles-js {
  background: #003c50;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: -100;
}
</style>